<template>
  <div class="main-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{isEdit ? '编辑电脑主机' : '添加电脑主机'}}</span>
      </div>
      
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="主机名称" prop="zhujiming">
          <el-input v-model="ruleForm.zhujiming"></el-input>
        </el-form-item>
        
        <el-form-item label="价格区间" prop="jiagequjian">
          <el-select v-model="ruleForm.jiagequjian" placeholder="请选择价格区间">
            <el-option
              v-for="item in jiagequjianOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="品牌" prop="pinpai">
          <el-select v-model="ruleForm.pinpai" placeholder="请选择品牌">
            <el-option
              v-for="item in pinpaiOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="CPU" prop="cpu">
          <el-input v-model="ruleForm.cpu"></el-input>
        </el-form-item>

        <el-form-item label="主板" prop="zhuban">
          <el-input v-model="ruleForm.zhuban"></el-input>
        </el-form-item>

        <el-form-item label="内存" prop="neicun">
          <el-select v-model="ruleForm.neicun" placeholder="请选择内存">
            <el-option
              v-for="item in neicunOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="硬盘" prop="yingpan">
          <el-input v-model="ruleForm.yingpan"></el-input>
        </el-form-item>

        <el-form-item label="显卡" prop="xianka">
          <el-input v-model="ruleForm.xianka"></el-input>
        </el-form-item>

        <el-form-item label="电源" prop="dianyuan">
          <el-input v-model="ruleForm.dianyuan"></el-input>
        </el-form-item>

        <el-form-item label="机箱" prop="jixiang">
          <el-input v-model="ruleForm.jixiang"></el-input>
        </el-form-item>

        <el-form-item label="价格" prop="jiage">
          <el-input-number v-model="ruleForm.jiage" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item label="生产日期" prop="shengchanriqi">
          <el-date-picker
            v-model="ruleForm.shengchanriqi"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="生产商" prop="shengchanshang">
          <el-input v-model="ruleForm.shengchanshang"></el-input>
        </el-form-item>

        <el-form-item label="图片" prop="tupian">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="headers"
            :on-success="handleImageSuccess"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="主机详情" prop="zhujijieshao">
          <el-input type="textarea" v-model="ruleForm.zhujijieshao" rows="4"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import config from '@/config/config'

export default {
  data() {
    return {
      isEdit: false,
      ruleForm: {
        zhujiming: '',
        jiagequjian: '',
        pinpai: '',
        cpu: '',
        zhuban: '',
        neicun: '',
        yingpan: '',
        xianka: '',
        dianyuan: '',
        jixiang: '',
        jiage: 0,
        shengchanriqi: '',
        shengchanshang: '',
        tupian: '',
        zhujijieshao: '',
        shangjia_id: '',
        status: 0
      },
      rules: {
        zhujiming: [
          { required: true, message: '请输入主机名称', trigger: 'blur' }
        ],
        jiagequjian: [
          { required: true, message: '请选择价格区间', trigger: 'change' }
        ],
        pinpai: [
          { required: true, message: '请选择品牌', trigger: 'change' }
        ],
        jiage: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ]
      },
      uploadUrl: config.baseUrl + 'file/upload',
      headers: {
        Token: localStorage.getItem('Token')
      },
      fileList: [],
      jiagequjianOptions: [],
      pinpaiOptions: [],
      neicunOptions: ['4G', '8G', '16G', '32G', '64G']
    }
  },
  created() {
    if (this.$route.params.id) {
      this.isEdit = true
      this.getInfo(this.$route.params.id)
    }
    this.getOptions()
    this.ruleForm.shangjia_id = localStorage.getItem('userId')
  },
  methods: {
    getInfo(id) {
      this.$http.get(`diannaozhuji/info/${id}`).then(({data}) => {
        if (data && data.code === 0) {
          this.ruleForm = data.data
          if (this.ruleForm.tupian) {
            this.fileList = [{
              name: '图片',
              url: this.ruleForm.tupian
            }]
          }
        }
      })
    },
    getOptions() {
      this.$http.get('option/jiagequjian/jiagequjian').then(({data}) => {
        if (data && data.code === 0) {
          this.jiagequjianOptions = data.data
        }
      })
      this.$http.get('option/pinpai/pinpai').then(({data}) => {
        if (data && data.code === 0) {
          this.pinpaiOptions = data.data
        }
      })
    },
    handleImageSuccess(res) {
      if (res.code === 0) {
        this.ruleForm.tupian = res.file
      }
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const api = this.isEdit ? 'diannaozhuji/update' : 'diannaozhuji/add'
          this.$http.post(api, this.ruleForm).then(({data}) => {
            if (data && data.code === 0) {
              this.$message.success(this.isEdit ? '更新成功' : '添加成功')
              this.goBack()
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    goBack() {
      this.$router.push('/shangjia/center')
    }
  }
}
</script>

<style scoped>
.main-container {
  padding: 20px;
}
</style>